<template>
  <div class="app-page">
    <el-table-form ref="form">
      <el-form-item label="启用时间：" :table-form-merge="2">
        <el-date-picker
          v-model="date"
          type="datetimerange"
          range-separator="至"
          start-placeholder="开始时间"
          end-placeholder="结束时间"
          format="yyyy-MM-dd HH:mm:ss"
          unlink-panels
          :default-time="['00:00:00', '23:59:59']"
          :clearable="false"
        />
      </el-form-item>
      <el-form-item label="启用人:">
        <el-input v-model.trim="query.applyUser" placeholder="请输入" clearable />
      </el-form-item>
      <template v-slot:btns>
        <el-button
          v-permission="[50303,1]"
          :loading="$loadingPlugin.fetchData"
          type="primary"
          @click="search"
        >查询</el-button>
        <el-popover
          class="config-tip"
          placement="bottom"
          width="550"
          trigger="hover"
        >
          <div class="attention">注意：</div>
          <div>一旦点击  启用预设电子围栏   预设的电子围栏会同步到正式的电子围栏上面去，正式生效</div>
          <i slot="reference" class="el-icon-question radio-icon" />
        </el-popover>
      </template>
    </el-table-form>
    <div class="btns">
      <el-button
        v-permission="[50303,2]"
        :loading="$loadingPlugin.getenableFence"
        type="primary"
        @click="getenableFence"
      >启用预设电子围栏</el-button>
    </div>
    <lb-table
      ref="lbTable"
      v-loading="$loadingPlugin.fetchData"
      v-el-height-adaptive-table="{ bottomOffset: 10 }"
      border
      element-loading-text="加载中"
      :column="tableData.column"
      :data="tableData.data"
      pagination
      :total="tableData.total"
      custom-column
      :immediate-fetch="false"
      @fetch="fetchData"
    />
  </div>
</template>

<script>
  import dayjs from 'dayjs'
  import { parseTime } from '@/utils'
  import { activateApply, activateList } from '@/api'

  export default {
    name: 'enableFence',
    data() {
      return {
        date: [dayjs(new Date()).format('YYYY-MM-DD') + ' ' + '00:00:00',
               dayjs(new Date()).format('YYYY-MM-DD') + ' ' + '23:59:59'],
        query: {
          applyUser: ''
        },
        tableData: {
          data: [],
          column: [
            {
              type: 'index',
              fixed: 'left'
            },
            {
              prop: 'activateUser',
              label: '启用人'
            },
            {
              prop: 'activateTime',
              label: '启用时间',
              minWidth: 200,
              render: (h, { row }) => {
                return (
                <span>
                  {(row.activateTime) && (parseTime(row.activateTime, '{y}-{m}-{d} {h}:{i}:{s}'))}
                </span>
              )
              }
            }
          ],
          total: 0
        }
      }
    },

    methods: {
      search() {
        this.updateData()
      },
      async getenableFence() {
        const that = this
        this.$confirm(`启用预设围栏之后，将立即同步到正式的电子围栏上面正式生效，会影响到整个用户的下单以及配送，
        请谨慎操作。`, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(async() => {
          const res = await activateApply()
          if (res) {
            this.$message.success('操作成功！')
            that.updateData()
          }
        })
      },
      updateData() {
        this.$refs.lbTable.fetch({ currentPage: 1 })
      },
      async fetchData({ currentPage, pageSize }) {
        if (!(this.date && this.date.length > 0)) {
          this.$message.warning('请选择启用时间')
          return
        }
        const query = {
          params: {
            startTime: this.date[0],
            endTime: this.date[1],
            activateUser: this.query.applyUser
          },
          currentPage,
          pageSize
        }
        const res = await activateList(query)
        if (res && res.data) {
          this.tableData.data = res.data.rows
          this.tableData.total = res.data.total
        }
      }
    }
  }
</script>

<style lang="scss" scoped>
.radio-icon {
  font-size: 16px;
  color: #606266;
}
.attention {
  color: red;
}
.config-tip {
  margin-left: 10px;
  cursor: pointer;
}
.btns {
  margin-bottom: 10px;
}
</style>
